<template>
  <div class="wrapper">
    <div class="content">
      <div class="head f-bian">
        <div class="left"><span class="iconfont icon-ren"></span> 操作员维护</div>
        <div class="right flex">
          <div @click="do_close('save')"><span class="iconfont icon-round-check"></span> 保存</div>
          <span @click="do_close('close')" class="iconfont icon-Close"></span>
        </div>
      </div>
      <div class="flex">
        <div class="textRightNav">
          <span @click="do_close('increase')"><span class="iconfont icon-xinzeng" ></span> 新增</span>
          <span @click="do_close('delete')"><span class="iconfont icon-shanchu"></span> 删除</span>
          <span @click="do_close('addExcel')"><span class="iconfont icon-excel"></span> 导入Excel</span>
        </div>
      </div>
      <div class="table">
        <ul>
          <li class="flex"><div class="flex1 f-zhong">姓名</div><div class="flex1 f-zhong">电话</div> </li>
          <li class="flex"><div class="flex1 f-zhong">姓名</div><div class="flex1 f-zhong">电话</div> </li>
          <li class="flex"><div class="flex1 f-zhong">姓名</div><div class="flex1 f-zhong">电话</div> </li>
          <li class="flex"><div class="flex1 f-zhong">姓名</div><div class="flex1 f-zhong">电话</div> </li>
          <li class="flex"><div class="flex1 f-zhong">姓名</div><div class="flex1 f-zhong">电话</div> </li>
          <li class="flex"><div class="flex1 f-zhong">姓名</div><div class="flex1 f-zhong">电话</div> </li>
        </ul>
      </div>
    </div>


  </div>
</template>

<script>
    export default {
        name: "cm_manageHandle",
      props:{
          handleFrom:String
      },
      methods:{
        do_close(item){
          let item2=item+"-"+this.handleFrom
          this.$emit("do_closeManageHandle",item2)
        }
      }
    }
</script>

<style scoped>
  .wrapper{
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
    z-index: 888;
  }
  .wrapper .content{
    width: 500px;
    position: absolute;
    right: 0;
    top: 70px;
    bottom: 0;
    background-color: white;
    z-index: 889;

  }
  .wrapper .content .head{
    height: 50px;
    line-height: 50px;
    background-color: #4092FD;
    color: white;
    padding: 0 15px;
  }
  .wrapper .content .head .right>div{
    margin-right: 15px;
    cursor: pointer;

  }
  .wrapper .content .head .right>div span, .wrapper .content .head .right>div {
    font-size: 14px;
  }
  .wrapper .content .head .right>span{
    font-size: 14px;
    cursor: pointer;
    position: relative;
    top: -2px
  }
  .wrapper .content .head .iconfont{
    font-size: 16px;
  }
  .textRightNav{
    height: 50px;
    line-height: 50px;
    margin-left: auto;
    /*border: 1px solid;*/
  }
  .textRightNav>span{
    margin-right: 15px;
    cursor: pointer;
  }
  .icon-xinzeng{
    color: #37C872;
    margin-right: 5px;
  }
  .icon-shanchu{
    color: #FC6268;
    margin-right: 5px;
  }
  .icon-excel{
    color: #37C872;
    position: relative;
    left: 10px;
  }
  .table{
    position: absolute;
    top: 100px;
    width: 100%;
    bottom: 0;
    overflow: auto;
    box-sizing: border-box;


  }
  .table ul{
    border-top: 1px solid #E6E6E6;
    border-left: 1px solid #E6E6E6;
    margin: 0 10px;
  }
  .table ul li>div{
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #E6E6E6;
    border-right: 1px solid #E6E6E6;
  }
  .table ul li:nth-child(2n+1){
    background-color:#FAFAFA ;
  }
  .table ul li:nth-child(2n){
    background-color:white ;
  }
  .table ul li:first-child{
    background-color: #C8DFFF;
    color: #4791FE;

  }
</style>
